import React, { Component } from 'react';
import { Button, Tabs } from 'antd';
import Verification from './verification';
import invoiceManagementService from '../invoice-management-service';
import constants from 'share/constants'
import Info from 'components/info';
import { messages } from 'share/common';
import SlideFrame from 'components/slide-frame';
import InvoiceCheckForm from '../invoice-check-form';
import { connect } from 'react-redux';
import { setInvoiceCheckTab } from 'actions/cache';

const { TabPane } = Tabs;

class InvoiceCheckDetails extends Component {
  state = {
    tabs: [
      {
        key: 'head-up-verification', tab: messages('expense-3.key147')/*抬头校验*/
      },
      // {
      //   key: 'consecutive-verification', tab: messages('expense-3.key148')/*连号校验*/
      // },
      // {
      //   key: 'overdue-verification', tab: messages('expense-3.key149')/*逾期校验*/
      // },
      // {
      //   key: 'owner-verification', tab: messages('expense-3.key150')/*归属人校验*/
      // },
      // {
      //   key: 'match-check', tab: messages('expense-3.key151')/*发票&费用匹配校验*/
      // },
      // {
      //   key: 'compliance-check', tab: messages('expense-3.key152')/*合规性校验*/
      // },
      // {
      //   key: 'repeat-verification', tab: messages('expense-3.key153')/*重复校验*/
      // }
    ],
    info:{
      attributes: [
        { title: messages('expense-3.key154')/*层级*/, dataIndex: 'levelCode', span: 8, render: value => constants.levelCode[value] },
        { title: messages('expense-3.key155')/*所属组织*/, dataIndex: 'levelOrgName', span: 8 },
        { title: messages('expense-3.key59')/*启用公司*/, dataIndex: 'companyNameList', span: 8, render:value =>  value ? value.join(',') :messages('expense-3.key60')/*通用*/}
      ]

    }
  };

  componentDidMount(){
    this.handleInitDate().then()
  }

  handleInitDate = async () => {
    const { info } = this.state;
    const { params: { id } } = this.props;
    const ret = await invoiceManagementService.getInvoiceCheckDetails(id);
    info.dataSource = ret.data;
    this.setState({ info });
  };

  handleEditDate = () => {
    const { tenant } = this.props;
    const { info: { dataSource } } = this.state;
    SlideFrame.open({
      title: messages('common.create')/*新建*/,
      content: InvoiceCheckForm,
      afterClose: this.afterCloseSlideFrame,
      params: {
        tab: 'invoice-check',
        tenant,
        ...dataSource
      }
    }, this);
  };

  handleJump = () => {
    window.open('/main/setting/invoice-management-control/invoice-to-cost');
  };

  afterCloseSlideFrame = (flag) => {
    flag && this.handleInitDate();
  };

  handleTabChange = (key) => {
    this.props.dispatch(setInvoiceCheckTab(key));
  };

  renderTitle = () => {
    return (
      <section style={{marginBottom: '12px'}}>
        <div>
          <span>{messages('expense-3.key156')/*说明：对于下述各类校验，系统默认强弱管控均有详细说明。若需更改，可跳转至*/}</span>
          <Button
            ghost
            type="link"
            onClick={this.handleJump}
          >
            <span>{messages('expense-3.key157')/*【申请与报销设置-发票设置-发票管控-发票生成费用】*/}</span>
          </Button>
          <span>{messages('expense-3.key158')/*设置规则*/}</span>
        </div>
      </section>
    );
  };

  render() {
    const { tabs, info } = this.state;
    const { params: { id }, invoiceCheckTab = 'head-up-verification' } = this.props;
    return (
      <section>
        {this.renderTitle()}
        <Info title={messages('expense-3.key159')/*基础设置*/} {...info}>
          <Button onClick={this.handleEditDate} type='primary'>{messages('common.edit')/*编辑*/}</Button>
        </Info>
        <Tabs
          animated={false}
          defaultActiveKey={invoiceCheckTab}
          onChange={this.handleTabChange}
        >
          {tabs.map(item => React.createElement(TabPane, item, <Verification params={item} key={item.key} id={id}/>))}
        </Tabs>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    invoiceCheckTab: state.cache.invoiceCheckTab
  };
}

InvoiceCheckDetails.propTypes = {};

export default connect(mapStateToProps)(InvoiceCheckDetails);

